<template>
	<view class="index">
		<view class="section" v-for="(day,index) in allStories" :key="day.date">
			<view class="section-title" v-if="index !== 0">{{day.date}}</view>

			<template v-if="day.top_stories">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :circular="true"
					indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,0.9)">
					<swiper-item v-for="story in day.top_stories" :key="story.id" style="position: relative;">
						<image :lazy-load="true" :src="story.image" mode="widthFix" style="width: 750rpx;"></image>
						<view class="mask"
							:style="{backgroundImage: `linear-gradient(to bottom, transparent, ${story.image_hue.replace('0x','#') + 'ef'} 50%)`}">
							<view class="title">{{story.title}}</view>
							<view class="hint">{{story.hint}}</view>
						</view>
					</swiper-item>
				</swiper>
			</template>

			<view class="stories-list" v-if="day.stories">
				<StoryItem v-for="story in day.stories" :story="story" />
			</view>





		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allStories: [],
				bannerHeight: 300
			}
		},
		onLoad() {
			this.getLatestStories()
		},
		onReachBottom() {
			this.getMoreStories()
		},
		methods: {
			getLatestStories: function() {
				uni.showToast({
					title: "加载中",
					icon: "loading"
				})
				uni.request({
					url: "https://apis.netstart.cn/zhihudaily/stories/latest",
					success: (res) => {
						this.allStories = [res.data]
					},
					complete: () => {
						uni.hideToast()
					}
				})
			},
			getMoreStories: function() {
				if (this.allStories.length) {
					uni.showToast({
							title: "加载中",
							icon: "loading"
						}),

						uni.request({


							url: "https://apis.netstart.cn/zhihudaily/stories/before/" + this.allStories[this
								.allStories.length - 1].date,
							success: (res) => {
								this.allStories = [...this.allStories, res.data]
							},
							complete: () => {
								uni.hideToast()
							}
						})
				}

			}
		}
	}
</script>

<style lang="less">
	.index {
		.section {
			.section-title {
				padding: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				&::after {
					content: '';
					display: block;
					height: 1rpx;
					background-color: lightgray;
					flex: 1;
					margin-left: 20rpx;
				}
			}

			.swiper {
				height: 750rpx;

				.mask {
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 9;
					width: 690rpx;
					height: 200rpx;
					padding: 30rpx;
					color: white;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;

					.title {
						font-size: 36rpx;
						font-weight: 600;
					}

					.hint {
						font-size: 28rpx;
						font-weight: 300;
						line-height: 2em;
					}

				}
			}

			.stories-list {}
		}
	}
</style>
